<template>
  <!-- 通知详情 -->
  <el-dialog title="通知详情" v-model="noticeParams.visible" @open="handleOpen" width="700" :close-on-click-modal="false">
    <div class="notice-detail" v-loading="loading">
      <el-form ref="ruleFormRef" :model="formData" label-width="90">
        <el-form-item label="通知标题：">
          <span>{{ formData.title || '-' }}</span>
        </el-form-item>
        <el-form-item label="内容：">
          <pre v-html="formData.content"></pre>
        </el-form-item>
        <el-form-item label="通知类型：">
          <span> {{ getDictOpt(dictOptions['notice_type'], formData.type).label }}</span>
        </el-form-item>
        <el-form-item label="发布人：">
          <span>{{ formData.publisherId || '-' }}</span>
        </el-form-item>
        <el-form-item label="发布时间：">
          <span>{{ formData.publishTime || '-' }}</span>
        </el-form-item>
        <el-form-item label="等级：">
          <el-tag :type="getDictOpt(dictOptions['public_level'], formData.level).tagType"> {{
            getDictOpt(dictOptions['public_level'], formData.level).label }}</el-tag>
        </el-form-item>
      </el-form>
    </div>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="emit('close')">关闭</el-button>
      </span>
    </template>
  </el-dialog>
</template>

<script setup>
import { reactive, ref, nextTick, getCurrentInstance } from 'vue'
import { getDetailNotice } from '@views/noticeManage/api/noticeManage'
import { getDictOpt } from '@/utils/common'
const { proxy } = getCurrentInstance()
const dictOptions = ref(proxy.useDict('notice_type', 'public_level'))
const props = defineProps({
  noticeParams: {
    type: Object,
    default: () => { },
    required: true
  }
})

const emit = defineEmits(['close'])
let formData = reactive({})
const ruleFormRef = ref(null)
const loading = ref(false)

// 获取数据
const handleQuery = async () => {
  loading.value = true
  const res = await getDetailNotice({ id: props.noticeParams.id })
  loading.value = false
  if (res?.code === 200) {
    formData = res.data
  }
}

// 初始化弹窗
const handleOpen = () => {
  nextTick(() => {
    ruleFormRef.value.resetFields()
    handleQuery()
    console.log('初始化')
  })
}

</script>

<style lang="scss" scoped>
.notice-detail {
  .el-form-item__content {
    span {
      word-break: break-all;
    }
  }

  pre {
    border: 1px solid $lightBorder;
    margin: 0;
    padding: 10px;
    width: 100%;
    border-radius: 5px;
    max-height: 300px;
    overflow: auto;
  }
}
</style>
